<template>
    <div class="goodsInfo_container">
        <!-- 加入购物车动态小球 -->
        <transition
         @before-enter="beforeEnter"
         @enter="Enter"
         @after-enter="afterEnter">
            <div class="ball" v-show="ballFlag" ref="ball"></div>
        </transition>
        <!-- 轮播图 -->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <wrapper :lunbotuList="lunbotuList" :isfull="false"></wrapper>
                </div>
            </div>
        </div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
            <div class="mui-card-header">{{info.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        市场价：<del>￥{{info.market_price}}</del>&nbsp;&nbsp;
                        销售价：<span class="now">￥{{info.sell_price}}</span>
                    </p>
                    <p class="num">
                        购买数量：<numBox @getShopCarNum="getShopCarNum" :max="info.stock_quantity"></numBox>
                    </p>
                    <p>
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addToShopCar">加入购物车</mt-button>
                    </p>
                </div>
            </div>
        </div>
        <!-- 商品参数详情 -->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p>商品货号：{{info.goods_no}}</p>
                    <p>库存情况：{{info.stock_quantity}}件</p>
                    <p>上架时间：{{info.add_time | dateFormat}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button type="primary" size="large" plain @click="goDesc(id)">商品介绍</mt-button>
                <mt-button type="danger" size="large" plain @click="goComment(id)">商品评论</mt-button>
            </div>
        </div>
    </div>
</template>

<script>
import wrapper from '../subcomponents/Wrapper.vue'
import numBox from '../subcomponents/NumBox.vue'
export default {
    data() {
        return {
            id: this.$route.params.id,
            lunbotuList: [
                {img: 'https://img.alicdn.com/imgextra/i4/2838892713/O1CN01Vejx6J1Vub0bhuvbC_!!2838892713.jpg_430x430q90.jpg'},
                {img: 'https://img.alicdn.com/imgextra/i1/2838892713/O1CN01xEXmaK1Vub0cUJa5g_!!2838892713.jpg_430x430q90.jpg'}
            ],
            info: { //商品信息
                id: this.$route.params.id,
                title: 'Huawei/华为 畅享9 64G全面屏',
                add_time: Date.now(),
                goods_no: 'SD792373',
                market_price: 2499,
                sell_price: 2199,
                stock_quantity: 60            
            },
            ballFlag: false, //购物车小球的显现
            shopCarSeclectNum: 1 //购物车数量
        }
    },
    created() {
        this.getLunbotu(),
        this.getGoodsInfo()
    },
    methods: {
        getLunbotu() { // 获取轮播图数据
            this.$http.get('api/getthumimages/'+ this.id).then(res => {
                if (res.body.status === 0) {
                    res.body.message.forEach(element => {
                        element.img = element.src
                    })
                    this.lunbotuList = res.body.message
                }
            })
        },
        getGoodsInfo() {//获取商品参数信息
            this.$http.get('api/goods/getinfo/' + this.id).then(res =>{
                if (res.body.status === 0) {
                    this.info = res.body.message[0]
                }
            })
        },
        goDesc(id) {//跳转到商品介绍
            this.$router.push({name:'goodsDesc', params:{id}})
        },
        goComment(id) {//跳转到商品评论
            this.$router.push({name:'goodsComment', params:{id}})
        },
        addToShopCar() { //添加到购物车
            // 购物车小球显示与消失
            this.ballFlag = !this.ballFlag
            //要加入购物车的商品信息
            var goodinfo = {
                id: this.info.id,
                price: this.info.sell_price,
                count: this.shopCarSeclectNum,
                selected: true,
                sell_price: this.info.sell_price,
                title: this.info.title,
                thumb_path: '//img.alicdn.com/bao/uploaded/i7/TB1IpbZtNnaK1RjSZFt9c2C2VXa_032801.jpg' 
            }
            //将商品信息添加到vuex托管的购物车中
            this.$store.commit('addToCar', goodinfo)
        },
        beforeEnter(el){//加入购物车小球动态效果
            el.style.transform = "translate(0, 0)"
        },
        Enter(el, done){
            el.offsetWidth

            const ballPos = this.$refs.ball.getBoundingClientRect()
            const badge = document.getElementById('badge')
            const badgePos = badge.getBoundingClientRect()

            var xDis = badgePos.left - ballPos.left
            var yDis = badgePos.top - ballPos.top
            el.style.transform = `translate(${xDis}px, ${yDis}px)`
            el.style.transition = "all .5s cubic-bezier(.4,-0.3,1,.68)"

            done()
        },
        afterEnter(el){
            this.ballFlag = !this.ballFlag
        },
        getShopCarNum(count) { //获取购物车数量
            this.shopCarSeclectNum = count
        }
    },
    components: {
        wrapper, // 轮播图组件
        numBox
    }
}
</script>

<style lang="scss" scoped>
    .goodsInfo_container{
        background-color: #eee;
        overflow: hidden;

        .now{
            color: red;
            font-size: 16px;
            font-weight: 700;
        }
        .num{
            margin-bottom: 10px;
        }

        .mui-card-footer{
            display: block;

            button{
                margin: 10px 0;
            }
        }

        .ball{
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: red;
            z-index: 99;
            position: absolute;
            top: 320px;
            left: 152px;
        }
    }
</style>


